<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统 - 智能教育平台</title>

    <!-- 最新CSS框架 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --accent-color: #06b6d4;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
            --glass-bg: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.18);
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--dark-color);
            overflow-x: hidden;
        }

        /* 动态背景动画 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../images/cat.png') center/cover;
            opacity: 0.1;
            z-index: -1;
            animation: bgFloat 20s ease-in-out infinite;
        }

        @keyframes bgFloat {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-20px) scale(1.05); }
        }

        /* 玻璃拟态容器 */
        .glass-container {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: 0 8px 32px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .glass-container:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px var(--shadow-color);
        }

        /* 主标题样式 */
        .hero-section {
            text-align: center;
            padding: 60px 0;
            margin-bottom: 40px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #fff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 300;
        }

        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s;
        }
        .stat-card:hover::before {
            left: 100%;
        }

        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }

        /* 主面板样式 */
        .main-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .panel-header {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            padding: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--glass-border);
        }

        .panel-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 现代化按钮 */
        .btn-modern {
            padding: 12px 28px;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn-modern:hover::before {
            left: 100%;
        }

        .btn-primary-modern {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        .btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
        }

        /* 搜索栏 */
        .search-container {
            position: relative;
            max-width: 500px;
            margin: 20px auto 30px;
            padding: 0 20px;
        }

        .search-input {
            width: 100%;
            padding: 15px 50px 15px 20px;
            border: 1px solid var(--glass-border);
            border-radius: 50px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            color: white;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .search-input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .search-icon {
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
            pointer-events: none;
        }

        /* 现代化表格 */
        .modern-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 0;
        }

        .modern-table th {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            text-align: left;
            font-weight: 600;
            color: white;
            border-bottom: 1px solid var(--glass-border);
        }

        .modern-table td {
            padding: 20px;
            color: white;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .modern-table tbody tr {
            transition: background-color 0.3s ease;
        }

        .modern-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.1);
            /*transform: scale(1.01);*/
        }

        /* 性别标签样式 */
        .gender-badge {
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .gender-badge:hover {
            transform: translateY(-1px);
        }

        .gender-male {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
        }

        .gender-male::before {
            content: '♂';
            font-size: 1rem;
        }

        .gender-female {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
            color: #f472b6;
            border: 1px solid rgba(236, 72, 153, 0.3);
            box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
        }

        .gender-female::before {
            content: '♀';
            font-size: 1rem;
        }

        /* 用户头像 */
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            margin-right: 10px;
        }

        /* 操作按钮组 */
        .action-group {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        .edit-btn {
            background: rgba(245, 158, 11, 0.2);
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .delete-btn {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

    /* 修复后的分页样式 - 解决抖动和弹出顶内容问题 */
        .pagination-modern {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 20px 0;
            flex-wrap: wrap;
            position: static; /* 改为静态定位，避免弹出 */
            margin-top: 20px; /* 添加上边距，自然分隔 */
            /*border-top: 1px solid rgba(255, 255, 255, 0.1); !* 添加分隔线，替代紫色条 *!*/
        }

        .page-btn {
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            font-size: 0.9rem;
            /* 移除所有可能导致抖动的属性 */
            backdrop-filter: none;
            transition: none;
            transform: none;
            box-shadow: none;
        }

        .page-btn:hover:not(.disabled) {
            background: rgba(255, 255, 255, 0.2);
            /* 移除hover时的任何变化，避免抖动 */
            box-shadow: none;
            transform: none;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .page-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }




         .page-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.05);
        }

        /* 模态框样式 */
        .modal-modern {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }

        .modal-header-modern {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border-bottom: 1px solid var(--glass-border);
            padding: 30px;
            border-radius: 24px 24px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        /* 修改：白色背景黑色文字的表单控件 */
        .form-control-modern {
            width: 100%;
            padding: 15px 20px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: white;
            color: #1e293b;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .form-control-modern:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
            background: white;
        }

        .form-control-modern::placeholder {
            color: #64748b;
        }

        /* 修改：性别下拉框保持白色背景黑色文字 */
        .form-select-modern {
            width: 100%;
            padding: 15px 20px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: white;
            color: #1e293b;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23475569' viewBox='0 0 16 16'%3e%3cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .form-select-modern:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
            background: white;
        }

        .form-select-modern option {
            background-color: white;
            color: #1e293b;
            padding: 10px;
            font-size: 1rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .panel-header {
                flex-direction: column;
                gap: 20px;
                align-items: stretch;
            }

            .modern-table {
                font-size: 0.9rem;
            }

            .modern-table th,
            .modern-table td {
                padding: 15px 10px;
            }
        }

        /* 加载动画 */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

         /* 修复滚动条样式，移除紫色渐变 */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: rgba(255, 255, 255, 0.7);
        }

        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        /*    添加密码框的眼睛图标 */
        .input-group-modern {
        position: relative;
        display: flex;
        align-items: center;
    }

        .btn-toggle-password {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
            padding: 5px;
            font-size: 14px;
        }

        .btn-toggle-password:hover {
            color: #fff;
        }

        .form-control-modern {
            padding-right: 40px;
        }
        .password-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .password-toggle {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
            padding: 5px;
            font-size: 14px;
            z-index: 10;
        }

        .password-toggle:hover {
            /* 移除颜色变化，保持默认状态 */
            color: inherit;
        }

        .form-control-modern {
            padding-right: 35px;
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="container-fluid p-0">
        <!-- 英雄区域 -->
        <div class="hero-section">
            <h1 class="hero-title">学生管理系统</h1>
            <p class="hero-subtitle">智能教育平台 · 高效管理 · 数据驱动</p>
        </div>

        <!-- 统计卡片 -->
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card glass-container">
                    <div class="stat-icon"><i class="fas fa-users"></i></div>
                    <div class="stat-number" id="totalStudents">0</div>
                    <div class="stat-label">总学生数</div>
                </div>
                <div class="stat-card glass-container">
                    <div class="stat-icon"><i class="fas fa-male"></i></div>
                    <div class="stat-number" id="maleStudents">0</div>
                    <div class="stat-label">男生数量</div>
                </div>
                <div class="stat-card glass-container">
                    <div class="stat-icon"><i class="fas fa-female"></i></div>
                    <div class="stat-number" id="femaleStudents">0</div>
                    <div class="stat-label">女生数量</div>
                </div>
                <div class="stat-card glass-container">
                    <div class="stat-icon"><i class="fas fa-chart-line"></i></div>
                    <div class="stat-number" id="avgAge">0</div>
                    <div class="stat-label">平均年龄</div>
                </div>
            </div>

            <!-- 主面板 -->
            <div class="main-panel">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fas fa-graduation-cap"></i>
                        学生信息管理
                    </div>
                    <div class="d-flex gap-3">
                        <button class="btn-modern btn-primary-modern" onclick="showAddModal()">
                            <i class="fas fa-plus me-2"></i>新增学生
                        </button>
                    </div>
                </div>

                <!-- 搜索栏 -->
                <!-- 搜索框部分保持不变 -->
                <div class="search-container">
                    <input type="text" id="globalSearch" class="search-input" placeholder="搜索学生姓名或学号...">
                    <i class="fas fa-search search-icon"></i>
                </div>

                <!-- 表格 -->
                <div class="table-responsive">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th><i class="fas fa-hashtag me-2"></i>ID</th>
                                <th><i class="fas fa-user-circle me-2"></i>学生</th>
                                <th><i class="fas fa-id-card me-2"></i>学号</th>
                                <th><i class="fas fa-venus-mars me-2"></i>性别</th>
                                <th><i class="fas fa-calendar-alt me-2"></i>年龄</th>
                                <th><i class="fas fa-chalkboard-teacher me-2"></i>班级</th>
                                <th><i class="fas fa-cogs me-2"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody id="studentTableBody">
                            <!-- 动态内容 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="pagination-modern" id="pagination">
                    <!-- 动态分页 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 新增/编辑学生模态框 -->
    <div class="modal fade" id="studentModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content modal-modern">
                <div class="modal-header-modern">
                    <h5 class="modal-title text-white" id="modalTitle">
                        <i class="fas fa-user-plus me-2"></i>新增学生
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="studentForm">
                        <input type="hidden" id="studentId">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-white">姓名</label>
                                <input type="text" class="form-control-modern" id="name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-white">学号</label>
                                <input type="text" class="form-control-modern" id="sno" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label text-white">年龄</label>
                                <input type="number" class="form-control-modern" id="age" min="1" max="100" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label text-white">性别</label>
                                <select class="form-select-modern" id="sex" required>
                                    <option value="">选择性别</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label text-white">班级ID</label>
                                <input type="number" class="form-control-modern" id="clas_id" min="1" max="5" required>
                            </div>
                        </div>
                   <!-- 原密码输入框 -->
                    <div class="col-md-4 mb-3">
                        <label class="form-label text-white">密码</label>
                        <div class="password-wrapper">
                            <input type="password" class="form-control-modern" id="pwd" placeholder="请输入密码">
                            <button type="button" class="password-toggle" onclick="togglePasswordVisibility('pwd')">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="modal-footer" style="border-top: 1px solid var(--glass-border);">
                    <button type="button" class="btn-modern" style="background: rgba(255,255,255,0.2); color: white;" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>取消
                    </button>
                    <button type="button" class="btn-modern btn-primary-modern" onclick="handleSubmit()">
                        <i class="fas fa-save me-2"></i>保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入最新JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 全局变量
        let currentPage = 1;
        const pageSize = 10;
        let allStudents = [];
        let filteredStudents = [];
        let totalStudentsCount = 0;

        // 页面加载
        document.addEventListener('DOMContentLoaded', () => {
            loadStudents();
        });
       // 切换密码显示/隐藏（不记住状态）
        function togglePasswordVisibility(inputId) {
            const input = document.getElementById(inputId);
            const icon = input.nextElementSibling.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.className = 'fas fa-eye';
            } else {
                input.type = 'password';
                icon.className = 'fas fa-eye-slash';
            }
        }
        // 确保每次打开模态框都是密文状态
        function resetPasswordVisibility() {
            const pwdInput = document.getElementById('pwd');
            const icon = pwdInput.nextElementSibling.querySelector('i');
            pwdInput.type = 'password';
            icon.className = 'fas fa-eye-slash';
        }

        // 在打开模态框时重置密码可见性
        // document.getElementById('addStudentBtn').addEventListener('click', resetPasswordVisibility);
        // 加载学生数据
        async function loadStudents() {
            try {
                const response = await fetch(`/student?page=${currentPage}&page_size=${pageSize}`);
                const data = await response.json();
                allStudents = data.students;
                filteredStudents = allStudents;
                totalStudentsCount = data.total || allStudents.length;
                updateStats();
                renderTable();
                renderPagination(totalStudentsCount);
            } catch (error) {
                console.error('加载数据失败:', error);
            }
        }

        // 更新统计数据
        function updateStats() {
            const total = allStudents.length;
            const males = allStudents.filter(s => s.sex === '男').length;
            const females = total - males;
            const avgAge = total > 0 ? Math.round(allStudents.reduce((sum, s) => sum + s.age, 0) / total) : 0;

            document.getElementById('totalStudents').textContent = total;
            document.getElementById('maleStudents').textContent = males;
            document.getElementById('femaleStudents').textContent = females;
            document.getElementById('avgAge').textContent = avgAge;
        }

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('studentTableBody');
            tbody.innerHTML = '';

            if (filteredStudents.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <h3>暂无学生数据</h3>
                            <p>点击"新增学生"按钮添加数据</p>
                        </td>
                    </tr>
                `;
                return;
            }

            filteredStudents.forEach(student => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>
                        <span class="fw-bold text-white">${student.id}</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="user-avatar">${student.name.charAt(0)}</div>
                            <div>
                                <div class="fw-bold">${student.name}</div>
                            </div>
                        </div>
                    </td>
                    <td>${student.sno}</td>
                    <td>
                        <span class="gender-badge ${student.sex === '男' ? 'gender-male' : 'gender-female'}">
                            ${student.sex}
                        </span>
                    </td>
                    <td>${student.age}岁</td>
                    <td>${student.clas_name || '未知班级'}</td>
                    <td>
                        <div class="action-group">
                            <button class="action-btn edit-btn" onclick="editStudent(${student.id})" title="编辑">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="action-btn delete-btn" onclick="deleteStudent(${student.id})" title="删除">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

    document.getElementById('globalSearch').addEventListener('input', async function(e) {
    const keyword = this.value.trim();

    // 如果搜索框为空，恢复显示所有学生
    if(!keyword) {
        currentPage = 1;
        loadStudents();
        return;
    }

    // 执行搜索
    try {
        const response = await fetch(`/student/search?keyword=${encodeURIComponent(keyword)}`);
        const data = await response.json();

        // 直接使用已有的空数据提示逻辑
        const tbody = document.getElementById('studentTableBody');
        if (data.students.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="empty-state">
                        <i class="fas fa-inbox"></i>
                        <h3>暂无学生数据</h3>
                        <p>点击"新增学生"按钮添加数据</p>
                    </td>
                </tr>
            `;
        } else {
            filteredStudents = data.students;
            renderTable();
        }
    } catch(error) {
        console.error('搜索出错:', error);
    }
});

// 更新表格的函数
function updateTable(students) {
    const tbody = document.querySelector('.modern-table tbody');
    tbody.innerHTML = "";

    students.forEach(student => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${student.name}</td>
            <td>${student.sno}</td>
            <td>${student.age}</td>
            <td><span class="gender-badge ${student.sex === '男' ? 'gender-male' : 'gender-female'}">${student.sex}</span></td>
            <td>${student.clas_name}</td>
            <td class="action-group">
                <button class="action-btn edit-btn"><i class="fas fa-edit"></i></button>
                <button class="action-btn delete-btn"><i class="fas fa-trash"></i></button>
            </td>
        `;
        tbody.appendChild(row);
    });
}
       // 显示添加模态框
        function showAddModal() {
            document.getElementById('modalTitle').innerHTML = '<i class="fas fa-user-plus me-2"></i>新增学生';
            document.getElementById('studentForm').reset();
            document.getElementById('studentId').value = '';

            // 重置密码为密文状态
            resetPasswordVisibility();

            new bootstrap.Modal(document.getElementById('studentModal')).show();
        }

        // 编辑学生
        function editStudent(id) {
             // 重置密码可见性
            resetPasswordVisibility();
            const student = allStudents.find(s => s.id === id);
            if (!student) return;

            document.getElementById('modalTitle').innerHTML = '<i class="fas fa-user-edit me-2"></i>编辑学生';
            document.getElementById('studentId').value = student.id;
            document.getElementById('name').value = student.name;
            document.getElementById('sno').value = student.sno;
            document.getElementById('age').value = student.age;
            document.getElementById('sex').value = student.sex;
            document.getElementById('clas_id').value = student.clas_id;
            document.getElementById('pwd').value = student.pwd;

            new bootstrap.Modal(document.getElementById('studentModal')).show();
        }

        // 删除学生
        async function deleteStudent(id) {
            if (confirm('确定要删除这个学生吗？')) {
                try {
                    const response = await fetch(`/student/${id}`, { method: 'DELETE' });
                    if (response.ok) {
                        loadStudents();
                        showToast('删除成功', 'success');
                    }
                } catch (error) {
                    showToast('删除失败', 'error');
                }
            }
        }

        // 提交表单
        async function handleSubmit() {
            const studentId = document.getElementById('studentId').value;
            const clasId = parseInt(document.getElementById('clas_id').value);

            // 验证班级ID范围
            if (clasId < 1 || clasId > 5) {
                showToast('班级ID必须在1-5之间', 'warning');
                return;
            }

            const studentData = {
                name: document.getElementById('name').value,
                sno: document.getElementById('sno').value,
                age: parseInt(document.getElementById('age').value),
                sex: document.getElementById('sex').value,
                clas_id: clasId,
                pwd: document.getElementById('pwd').value
            };

            if (!studentData.name || !studentData.sno) {
                showToast('请填写完整信息', 'warning');
                return;
            }

            try {
                const method = studentId ? 'PUT' : 'POST';
                const url = studentId ? `/student/${studentId}` : '/student';

                const response = await fetch(url, {
                    method: method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(studentData)
                });

                if (response.ok) {
                    bootstrap.Modal.getInstance(document.getElementById('studentModal')).hide();
                    loadStudents();
                    showToast(studentId ? '更新成功' : '添加成功', 'success');
                }
            } catch (error) {
                showToast('操作失败', 'error');
            }
        }

        // 渲染分页
        function renderPagination(total) {
            const totalPages = Math.ceil(total / pageSize);
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            if (totalPages <= 1) {
                return;
            }

            // 上一页
            pagination.innerHTML += `
                <button class="page-btn ${currentPage === 1 ? 'disabled' : ''}"
                        onclick="changePage(${currentPage - 1})"
                        ${currentPage === 1 ? 'disabled' : ''}>
                    <i class="fas fa-chevron-left"></i>
                </button>
            `;

            // 页码
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);

            if (startPage > 1) {
                pagination.innerHTML += `<button class="page-btn" onclick="changePage(1)">1</button>`;
                if (startPage > 2) {
                    pagination.innerHTML += `<span class="page-btn disabled">...</span>`;
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                const active = i === currentPage ? 'active' : '';
                pagination.innerHTML += `
                    <button class="page-btn ${active}" onclick="changePage(${i})">${i}</button>
                `;
            }

            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    pagination.innerHTML += `<span class="page-btn disabled">...</span>`;
                }
                pagination.innerHTML += `<button class="page-btn" onclick="changePage(${totalPages})">${totalPages}</button>`;
            }

            // 下一页
            pagination.innerHTML += `
                <button class="page-btn ${currentPage === totalPages ? 'disabled' : ''}"
                        onclick="changePage(${currentPage + 1})"
                        ${currentPage === totalPages ? 'disabled' : ''}>
                    <i class="fas fa-chevron-right"></i>
                </button>
            `;
        }

        // 切换页面
        function changePage(page) {
            const totalPages = Math.ceil(totalStudentsCount / pageSize);
            if (page >= 1 && page <= totalPages && page !== currentPage) {
                currentPage = page;
                loadStudents();
            }
        }

        // 显示提示
        function showToast(message, type) {
            const toast = document.createElement('div');
            toast.className = `alert alert-${type} position-fixed`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; backdrop-filter: blur(10px);';
            toast.innerHTML = message;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
    </script>
</body>
</html>
